<script setup lang="ts">
import { HomeAPI } from "@/api/HomeAPI";
import { navigationStore } from "@/stores/navigationStore";
import { useUserStore } from "@/stores/userStore";
import type { navtag, navList } from "@/types/navigation";
import { ElNotification } from "element-plus";

//获取用户名store对象
const userStore = useUserStore();
const { userinfo } = storeToRefs(userStore);
//获取用导航store对象
const navStore = navigationStore();
//获取导航标签
navStore.get_Navigation();

const { navtaglist, navList } = storeToRefs(navStore);
//设置添加标签的开关
const site_dialogVisible = ref(false);
//设置添加导航开关
const site_naVisible = ref(false);
//title
const title = ref("添加标签");
const title1 = ref("添加网站");
//添加标签的类名
const navtag = ref<navtag>({
  nid: 0,
  title: "推荐",
  order_by: "create_date",
});
//获取导航标签
const actions_all = ref();
//获取导航信息
navStore.get_Navlist(navtag.value);
//添加标签函数
async function add_Tag() {
  navtag.value.title = navtag.value.title.trim();
  const ifadd = await navStore.Navaigation_add(navtag.value);
  if (!ifadd) {
    site_dialogVisible.value = ifadd;
    navtag.value.title = "";
  }
}
//编辑标签
async function edit_nav(item: navtag) {
  if (!userinfo.value.result.is_superuser) {
    return;
  }
  site_dialogVisible.value = true;
  title.value = "编辑标签";
  navtag.value = item;
}
//删除标签
async function delet_nav(nid: number) {
  if (!userinfo.value.result.is_superuser) {
    return;
  }
  navStore.delete_Navaigation(nid);
}
//切换标签
async function selected(item: navtag, index: number) {
  if (index > navtaglist.value.result.length - 9) {
    const lettt = `${-100 * (navtaglist.value.result.length - 18)}px`;
    actions_all.value.style.left = lettt;
  } else if (index > 10) {
    const lettt = `${-100 * (index - 9)}px`;
    actions_all.value.style.left = lettt;
  } else {
    actions_all.value.style.left = "0px";
  }
  navtag.value = item;
  navtag.value.order_by = "create_date";
  navStore.get_Navlist(item);
}
//定义添加导航参数
const navtion = ref<navList>({
  nid: 0,
  title: "",
  abstract: "",
  href: "",
  tags: [],
  icon_href: "",
  status: userinfo.value.result.is_superuser ? 1 : 0,
});

//添加导航信息
async function add_Navsmg() {
  title1.value = "添加网站";
  site_naVisible.value = await navStore.add_Navsmg(navtion.value);
  //获取导航信息

  if (!site_naVisible.value) {
    await navStore.get_Navlist(navtag.value);
    navtion.value = {
      nid: 0,
      title: "",
      abstract: "",
      href: "",
      tags: [],
      icon_href: "",
      status: userinfo.value.result.is_superuser ? 1 : 0,
    };
  }
}
//编辑导航信息
async function edit_Navsmg(navitem: navList) {
  if (!userinfo.value.result.is_superuser) {
    return;
  }
  title1.value = "网站编辑";
  navtion.value = {
    ...navitem,
    tags: navitem.tags.map((item) => item.nid),
  };

  site_naVisible.value = true;
}
//删除导航信息
async function delete_Navsmg(nid: number) {
  await navStore.delete_Navsmg(nid);
}
//排序
function sort(order: string) {
  navtag.value.order_by = order;
  navStore.get_Navlist(navtag.value);
}
//获取点赞的元素
const target = ref();
//获取点赞数量元素
const diggcount = ref();
//导航信息点赞
async function Navmsg_digg(nid: number, index: number) {
  //发送请求获取数据

  const res = await HomeAPI.Navmsg_digg(nid);
  if (res.code === 200) {
    ElNotification({
      title: "点赞",
      message: res.data.msg,
      type: "success",
    });
    target.value[index].classList.add("super");
    diggcount.value[index].innerHTML = res.data.count;
    let timer: number | NodeJS.Timeout | null | undefined = null;
    timer = setTimeout(() => {
      clearTimeout(timer!);
      target.value[index].classList.remove("super");
    }, 1000);
  } else {
    ElNotification({
      title: "点赞",
      message: res.msg,
      type: "error",
    });
  }
}
//获取收藏的元素
const collects = ref();
//获取收藏数量元素
const collectcount = ref();
//收藏导航信息
async function Navmsg_collects(nid: number, index: number) {
  //发送请求获取数据
  const res = await HomeAPI.Navmsg_collects(nid);

  if (res.code === 200) {
    ElNotification({
      title: "收藏",
      message: res.data.msg,
      type: "success",
    });
    collects.value[index].classList.add("super");
    collectcount.value[index].innerHTML = res.data.count;
  } else if (res.code === 300) {
    ElNotification({
      title: "收藏",
      message: res.data.msg,
      type: "error",
    });
    collects.value[index].classList.remove("super");
    collectcount.value[index].innerHTML = res.data.count;
  }

}
</script>
<template>
  <div class="main">
    <el-dialog :title="title" width="40%" v-model="site_dialogVisible">
      <div class="dialog_content">
        <div>
          <label for="">标签名</label>
          <el-input placeholder="请输入标签名" v-model="navtag.title">
          </el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="site_dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add_Tag">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="title1" width="40%" v-model="site_naVisible">
      <div class="dialog_content">
        <div>
          <label for="site_add__title">网站标题</label>
          <el-input
            id="site_add__title"
            placeholder="请输入网站标题"
            v-model="navtion.title"
          >
          </el-input>
        </div>
        <div>
          <label for="site_add__href">网站链接</label>
          <el-input
            id="site_add__href"
            placeholder="请输入网站链接"
            v-model="navtion.href"
          >
          </el-input>
        </div>
        <div>
          <label for="site_add__abstract">网站描述</label>
          <el-input
            id="site_add__abstract"
            placeholder="请输入网站描述"
            type="textarea"
            :rows="4"
            resize="none"
            v-model="navtion.abstract"
          >
          </el-input>
        </div>
        <div>
          <label for="site_add__abstract">网站图片</label>
          <div class="flex">
            <el-input
              id="site_add__abstract"
              placeholder="请输入网站图标的在线链接"
              class="icon_href"
              v-model="navtion.icon_href"
            >
            </el-input>
            <div class="icon_img">
              <img :src="navtion.icon_href" alt="" />
            </div>
          </div>
        </div>
        <div>
          <label for="">网站标签</label>
          <el-select multiple placeholder="请选择" v-model="navtion.tags">
            <el-option
              v-for="item in navtaglist.result"
              :key="item.nid"
              :label="item.title"
              :value="item.nid"
              :disabled="item.title === '收藏'"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button>取 消</el-button>
        <el-button type="primary" @click="add_Navsmg">确 定</el-button>
      </span>
    </el-dialog>
    <div class="actions actions_root">
      <div class="actions_tag">
        <div class="actions_all" ref="actions_all">
          <div
            class="tag_item"
            v-for="(item, index) in navtaglist.result"
            :class="{ active: navtag.title === item.title }"
            @contextmenu.ctrl.prevent="delet_nav(item.nid)"
            :key="item.nid"
            @click.ctrl.prevent="edit_nav(item)"
            @click="selected(item, index)"
          >
            {{ item.title }}
          </div>
        </div>
      </div>
      <div
        v-if="userinfo.result.is_superuser"
        class="tag_item super"
        @click="
          site_dialogVisible = true;
          navtag = { nid: 0, title: '', order_by: 'create_date' };
        "
      >
        添加标签
      </div>
    </div>
    <div class="now_action">
      <h2>{{ navtag.title }}</h2>
      <div class="actions">
        <span
          class="btn add"
          @click="
            site_naVisible = true;
            navtion = {
              nid: 0,
              title: '',
              abstract: '',
              href: '',
              tags: [],
              icon_href: '',
              status: userinfo.result.is_superuser ? 1 : 0,
            };
          "
          >去添加</span
        >
        <span
          :flag="navtag.order_by === 'create_date' ? 'show' : ''"
          class="btn"
          @click="sort('create_date')"
          >最新</span
        >
        <span
          class="btn"
          :flag="navtag.order_by === 'digg_count' ? 'show' : ''"
          @click="sort('digg_count')"
          >最多点赞</span
        >
        <span
          class="btn"
          :flag="navtag.order_by === 'collects_count' ? 'show' : ''"
          @click="sort('collects_count')"
          >最多收藏</span
        >
      </div>
    </div>
    <ul class="site_list">
      <li v-for="(navitem, index) in navList.result" :key="index">
        <div class="top" :class="{ flers: userinfo.result.is_superuser }">
          <i
            class="fa fa-edit site_edit show"
            @click="edit_Navsmg(navitem)"
            @contextmenu.ctrl.prevent="delete_Navsmg(navitem.nid as number)"
          ></i>
          <div class="content">
            <a class="cover cursor">
              <img :src="navitem.icon_href" alt="" />
            </a>
            <div class="right">
              <a class="title cursor" :href="navitem.href">
                {{ navitem.title }}</a
              >
              <div class="abstract">
                {{ navitem.abstract }}
              </div>
            </div>
          </div>
          <div class="tags">
            <span
              v-for="(tag, index) in navitem.tags"
              :key="tag.nid"
              :id="index === 0 ? 'super' : ''"
              >{{ tag.title }}</span
            >
          </div>
        </div>
        <div class="bottom">
          <div class="item">
            <i
              class="fa fa-heart cursor"
              ref="target"
              @click="Navmsg_digg(navitem.nid as number, index)"
            ></i>
            <span ref="diggcount">{{ navitem.digg_count }}</span>
          </div>

          <div class="item">
            <i
              ref="collects"
              class="fa fa-star cursor"
              :class="{ super:   navList.collent_arr!!.indexOf(navitem.nid!!)>=0 }"
              @click="Navmsg_collects(navitem.nid as number, index)"
            ></i>
            <span ref="collectcount">{{ navitem.collects_count }}</span>
          </div>

          <div class="item">
            <el-tooltip
              :open-delay="500"
              effect="dark"
              content="访问网站"
              placement="top-end"
            >
              <a target="_blank" :href="navitem.href" class="cursor">
                <i class="fa fa-location-arrow"></i>
              </a>
            </el-tooltip>
          </div>
        </div>
      </li>
    </ul>
    <div class="notes" v-if="navtag.title === '收藏'">
      <img src="/static/my/img/sites/notes.svg" alt="" />
      <span>你还没有收藏的网站，快去收藏吧！</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.main {
  width: 1200px;
  margin: 0 auto;
  margin-top: 20px;
}
.cursor {
  cursor: pointer;
}

.actions {
  display: flex;
  height: 30px;

  .actions_tag {
    width: 1100px;
    white-space: nowrap;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    display: flex;
    position: relative;

    .actions_all {
      position: absolute;
      transition: all 0.9s;
      left: 0;
      .active {
        background-color: #00a1d6;
        color: white;
      }
    }
  }

  .tag_item {
    display: inline-block;
    padding: 5px 10px;
    font-size: 14px;
    background-color: var(--el-bg-color);
    color: var(--el-text-color-primary);
    border-radius: 3px;
    margin-right: 10px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;

    &.super {
      background-color: #f85168;
      color: white;
      margin-right: 0;
      margin-left: 10px;
    }
  }

  .btn {
    height: 35px;
    padding: 0 10px;
    border: 1px solid var(--bg_darken);
    background-color: var(--ele_bg);
    font-size: 14px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;

    &:hover {
      border-color: #3a8ee6;
      color: #3a8ee6;
      border: 1px solid #3a8ee6;
    }

    &[flag="show"] {
      border-color: #3a8ee6;
      border: 1px solid #3a8ee6;
      color: #3a8ee6;
    }
  }

  .add {
    margin-right: 20px;
  }
}

.now_action {
  margin-top: 20px;
  border-radius: 5px;
  width: 100%;
  background-color: var(--el-bg-color-overlay);
  padding: 20px;
  display: flex;
  justify-content: space-between;
}

.site_list {
  margin-top: 20px;
  width: 100%;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  li {
    width: 30.5%;
    margin-bottom: 20px;
    transition: all 0.3s;

    .top {
      width: 100%;
      height: 150px;
      padding-left: 20px;
      padding-right: 20px;
      background-color: var(--el-bg-color-overlay);
      position: relative;
      padding-top: 20px;
      .site_edit {
        position: absolute;
        right: 10px;
        cursor: pointer;
        top: 10px;
        opacity: 0;
        color: var(--el-text-color-primary);
        transition: all 0.3s;
      }
      #super {
        background-color: #f85168;
        color: white;
        margin-right: 0;
        margin-left: 10px;
      }

      .content {
        display: flex;
        justify-content: space-between;
        height: 110px;

        .cover {
          width: 15%;
          display: block;

          img {
            width: 100%;
          }
        }

        .right {
          width: 85%;
          padding-left: 10px;

          .title {
            display: block;
            margin-bottom: 10px;
            font-size: 18px;
            font-weight: 600;
            color: var(--el-text-color-primary);
            overflow: hidden;
            white-space: nowrap; // 多行状态下不换行
            text-overflow: ellipsis;
          }

          .abstract {
            font-size: 14px;
            color: var(--el-text-color-regular);
            line-height: 1.3rem;
            -webkit-line-clamp: 3;
            display: -webkit-box;
            overflow: hidden;
            overflow-wrap: break-word;
            -webkit-box-orient: vertical;
          }
        }
      }

      .tags {
        width: 100%;
        overflow: hidden;
        font-size: 14px;
        display: flex;
        justify-content: right;

        span {
          padding: 3px 10px;
          flex-shrink: 0;
          background-color: var(--el-fill-color-dark);
          border: 1px solid var(--el-fill-color-dark);
          color: var(--el-text-color-regular);
          border-radius: 2px;
          margin-left: 10px;
        }
      }
    }
    .flers {
      &:hover {
        .site_edit {
          opacity: 1;
        }
      }
    }
    .bottom {
      margin-top: 1px;
      width: 100%;
      padding-left: 20px;
      padding-right: 20px;
      background-color: var(--el-bg-color-overlay);

      display: flex;

      .item {
        width: 33.33%;
        position: relative;
        height: 40px;
        color: #9a9a9a;
        // background-color: red;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        .super {
          color: #f85168;
        }
        span {
          margin-left: 5px;
        }

        &:nth-child(1),
        &:nth-child(2) {
          &::after {
            content: "";
            display: block;
            width: 1px;
            height: 80%;
            background-color: var(--el-text-color-disabled);
            position: absolute;
            right: 0;
          }
        }
      }
    }

    &:hover {
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    }

    &:nth-child(3n + 2) {
      &:last-child {
        position: relative;
        left: -33%;
      }
    }
  }
}

.notes {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  img {
    height: 200px;
  }

  span {
    margin-top: 20px;
    font-size: 14px;
    color: var(--font_2);
  }
}

.dialog_content {
  > div {
    margin-bottom: 10px;

    > label {
      display: block;
      margin-bottom: 5px;
    }

    .icon_href {
      width: 70%;
    }

    .icon_img {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 30%;

      img {
        height: 40px;
      }
    }
  }
}
</style>
